'use client';

import { useState } from 'react';
import styled from 'styled-components';
import TrajectoryModal from './TrajectoryModal';

// 历史轨迹监测按钮样式
const TrajectoryButtonContainer = styled.div`
  position: absolute;
  top: 100px;
  right: 23%; /* 调整位置到右侧面板左侧 */
  z-index: 15;
`;

const StyledButton = styled.button`
  width: 120px;
  height: 40px;
  background-color: rgba(24, 144, 255, 0.3);
  color: white;
  border: 1px solid rgba(24, 144, 255, 0.7);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(3px); /* 添加模糊效果使按钮更融入背景 */
  
  &:hover {
    background-color: rgba(24, 144, 255, 0.5);
    box-shadow: 0 0 15px rgba(24, 144, 255, 0.5);
    transform: translateY(-2px);
  }
  
  &:active {
    transform: translateY(0);
    background-color: rgba(24, 144, 255, 0.7);
  }
  
  &::before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url('/images/dashboard/icons/history-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 8px;
    display: inline-block;
  }
`;

export default function TrajectoryButton() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  
  const handleOpenModal = () => {
    setIsModalOpen(true);
  };
  
  const handleCloseModal = () => {
    setIsModalOpen(false);
  };
  
  return (
    <>
      <TrajectoryButtonContainer>
        <StyledButton onClick={handleOpenModal}>
          历史轨迹监测
        </StyledButton>
      </TrajectoryButtonContainer>
      
      {isModalOpen && (
        <TrajectoryModal onClose={handleCloseModal} />
      )}
    </>
  );
} 